<template>
	<Layout>
		<view class="logo-box">
			<view class="logo-box-img">
				<image src="../../static/logo.png" mode=""></image>
			</view>
		</view>
		<view class="give-advice">
			<view class="show-user-name">
				亲爱的：{{state.memberName}}
			</view>
			
			<view class="form-box">
				<view :class="['item-form-select', state.deptName && 'item-form-select-act']" @click="toSelectStore">
					{{state.deptName? state.deptName: '请选择门店'}}
				</view>
				<view class="item-form-input">
					<input class="item-input" v-model.trim="state.contact" type="text" placeholder="请输入联系方式" placeholder-style="#9F9F9F" />
				</view>
				<view class="item-form-area">
					<textarea class="item-area" v-model.trim="state.adviceMsg" maxlength="500" placeholder="请在这里直接填写您的问题或意见建议,谢谢" placeholder-style="#9F9F9F"></textarea>
				</view>
				<view class="item-form-upload">
					<view class="item-img-box" v-for="(item, idx) in state.uploadImgList" :key="idx">
						<view class="item-img" @click="toPreviewImg(item)">
							<image :src="item" mode="aspectFill"></image>
						</view>
						<view class="item-img-delete" @click="toDeleteImg(idx)"> <uv-icon size="20" color="#9F9F9F" name="close-circle"></uv-icon> </view>
					</view>
					<view class="item-img-upload" v-if="state.uploadImgList.length < 9" @click="toUploadImg">
						<view class="item-upload">
							<uv-icon size="20" color="#9F9F9F" name="plus"></uv-icon>
						</view>
						<view class="item-upload-txt">上传照片</view>
					</view>
				</view>
				
				<view class="form-btn" @click="toApplyFeedback">提交</view> 
			</view>
		</view>
		
		<uv-picker ref="picker" title="选择门店" round="20" :defaultIndex="state.defaultIdx" :columns="state.storeColumns" keyName="deptName" @confirm="confirmStore"></uv-picker>
	</Layout>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'
	import Layout from '@/components/layout.vue'
	import { toastShow, getImgUrl, getUrlParam, toWxLogin } from '@/common/tool'
	import { useCommonStore } from '@/stores/common'
	const { toShowGlobalPop } = useCommonStore()
	
	const state = reactive({
		storeColumns: [] as any,
		uploadImgList: [] as any,
		defaultIdx: [] as any,
		deptName: '',
		deptId: '',
		contact: '',
		adviceMsg: '',
		memberName: ''
	})
	
	const picker = ref()
	
	const toSelectStore = () => {
		picker.value.open();
	}
	
	const confirmStore = (e:any) => {
		state.deptId = e.value[0].deptId
		state.deptName = e.value[0].deptName
	}
	
	const getStoreList = async () => {
		let res = await uni.$api.storeList()
		if(res) {
			let { data } = res
			
			let deptId = window.sessionStorage.getItem('deptId') || ''
			data.forEach((item: any, idx: number) => {
				if(item.deptId == Number(deptId)) {
					state.deptId = deptId
					state.deptName = item.deptName
					state.defaultIdx = [idx]
				}
			})
			
			state.storeColumns = [data]
		}
	}
	
	const toUploadImg = () => {
		
		uni.chooseImage({
		    count: 9,
		    sizeType: ['compressed'],
		    sourceType: ['album', 'camera'],
		    success: function (res: any) {
				// toastShow('图片上传中...')
				getImgUrl(res.tempFilePaths, (url: string) => {
					if(state.uploadImgList.length < 9) {
						state.uploadImgList.push(url)
					}else {
						toastShow('最多上传9张图片')
					}
				})
		    },
			fail() {
				uni.hideLoading()
			}
		})
	}
	
	const toPreviewImg = (url: string) => {
		uni.previewImage({
			current: url,
			urls: state.uploadImgList
		})
	}
	
	const toDeleteImg = (idx: any) => {
		state.uploadImgList.splice(idx, 1)
	}
	
	const toApplyFeedback = () => {
		if(!state.deptId) {
			toastShow('请选择门店')
			return
		}
		
		if(!state.contact) {
			toastShow('请输入您的联系方式')
			return
		}
		
		if(!uni.$uv.test.mobile(state.contact)) {
			toastShow('请输入正确的联系方式')
			return
		}
		
		if(!state.adviceMsg) {
			toastShow('请输入您的问题或意见建议')
			return
		}
		
		toShowGlobalPop({
			show: true,
			title: `确认提交？`,
			// content: contentStr,
			showCancelButton: true,
			confirm: async () => {
				let res = await uni.$api.applyAdvice({
					deptId: state.deptId,
					contact: state.contact,
					adviceMsg: state.adviceMsg,
					images: state.uploadImgList.join(';')
				})
				if(res) {
					uni.showToast({
						icon: 'success',
						title: res.msg,
						success() {
							setTimeout(() => {
								state.deptName = ''
								state.deptId = ''
								state.contact = ''
								state.adviceMsg = ''
								state.uploadImgList = []
										
								uni.navigateTo({
									url: '/pages/feedbackSuccess/feedbackSuccess'
								})
							}, 1500)
						}
					})
				}
			}
		})
	}
	
	const getUserInfo = async () => {
		let res = await uni.$api.getUserInfo()
		if(res) {
			let { data } = res
			state.memberName = data.memberName
		}
	}
	
	const wxLogin = async (appletCode: any) => {
		let res = await uni.$api.wxLogin({
			code: appletCode
		})
		if(res) {
			let { msg } = res
			uni.$api.token = msg
			window.sessionStorage.setItem('token', msg)
			getStoreList()
			getUserInfo()
		}
	}
	
	onLoad((opt: any) => {
		if(opt.deptId) {
			window.sessionStorage.setItem('deptId', opt.deptId)
		}
		
		let token = window.sessionStorage.getItem('token')
		if(!token) {
			let wxCode = null;
			if (opt && opt.code) {
				wxCode = opt.code;
			}
			if (!wxCode) {
				toWxLogin()
			}else {
				wxLogin(wxCode)
			}
		}else {
			getStoreList()
			getUserInfo()
		}
		
	})
	
</script>

<style scoped lang="scss">
	.logo-box {
		padding: 24rpx 16rpx;
		.logo-box-img {
			width: 380rpx;
			height: 150rpx;
		}
	}
	.give-advice {
		padding: 0rpx 40rpx 176rpx 40rpx ;
		.show-user-name {
			font-size: 32rpx;
			color: $theme-user-blue;
			font-weight: bold;
		}
		.form-box {
			width: 100%;
			.item-form-select {
				width: 100%;
				margin-top: 40rpx;
				font-size: 30rpx;
				color: $theme-grey;
				height: 84rpx;
				border: 1px solid $theme-border;
				border-radius: 12rpx;
				line-height: 80rpx;
				padding: 0 12rpx;
				font-weight: 500;
			}
			.item-form-select-act {
				color: $theme-black;
			}
			.item-form-input {
				width: 100%;
				margin-top: 32rpx;
				padding: 0 12rpx;
				border: 1px solid $theme-border;
				border-radius: 12rpx;
				height: 84rpx;
				.item-input {
					width: 100%;
					height: 100%;
					font-size: 30rpx;
					color: $theme-black;
					font-weight: 500;
				}
			}
			.item-form-area {
				margin-top: 32rpx;
				width: 100%;
				height: 400rpx;
				border: 1px solid $theme-border;
				border-radius: 12rpx;
				.item-area {
					width: 100%;
					padding: 20rpx 12rpx;
					font-size: 30rpx;
					color: $theme-black;
					font-weight: 500;
				}
			}
			.item-form-upload {
				margin-top: 32rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				
				.item-img-box {
					display: flex;
					flex-wrap: wrap;
					width: 120rpx;
					height: 120rpx;
					position: relative;
					margin: 0 32rpx 32rpx 0;
					.item-img {
						border-radius: 8rpx;
						width: 100%;
						height: 100%;
						overflow: hidden;
					}
					.item-img-delete {
						position: absolute;
						top: -16rpx;
						right: -16rpx;
					}
				}
				.item-img-upload {
					width: 96rpx;
					height: 120rpx;
					margin-bottom: 12rpx;
					.item-upload {
						width: 96rpx;
						height: 96rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 8rpx;
						border: 1px dashed $theme-border;
					}
					.item-upload-txt {
						font-size: 20rpx;
						color: $theme-grey;
						line-height: 30rpx;
						text-align: center;
					}
				}
			}
			.form-btn {
				margin-top: 32rpx;
				width: 100%;
				height: 88rpx;
				border-radius: 10rpx;
				background-color: $theme-main;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: $theme-white;
			}
		}
	}
</style>